<template>
    <div>
        <input type="button" value="加载" @click="load">
        <input type="button" value="卸载" @click="unload">
        <input type="button" value="选择" @click="select">
        <input type="button" value="更新" @click="update">
        <input type="button" value="保存" @click="save">
        <!--所有队伍0  当地队伍1  地方队伍2  部队队伍3-->
        <input type="button" value="本地队伍" @click="showTeam(1)">
        <input type="button" value="地方支援" @click="showTeam(2)">
        <input type="button" value="部队支援" @click="showTeam(3)">
    </div>
</template>
<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator';
    import MapCommon from '@/util/MapCommon';
    import RescueTeam from './RescueTeam';
    import {rescueTeamServer} from '@/api/installServer';

    @Component({
        name: 'RescueTeamTest',
        components: {},
        mixins: [MapCommon],
    })
    export default class RescueTeamTest extends Vue {

        private mapId: string = '';
        private getComponent: any = null;
        private dataList: any = [];

        private mounted() {
            // 地图容器id
            this.mapId = 'map';
            (this as any).resolveMap(this.mapId).then((data: any) => {
                this.init(data.map);
            });
        }

        //  地图加载完成后，初始化
        private init(map: any) {
            const temp: any = this;
            // 地图配置
            const mapConfig = temp.$ioc.resolve(`mapConfig-${this.mapId}`);
            // 符号配置
            const symbolConfig = temp.$ioc.resolve(`symbolConfig-${this.mapId}`);
            // 通用的地图组件实例
            const GISComponents = temp.$ioc.resolve(`GISComponents-${this.mapId}`);
            //
            const component = new RescueTeam({
                map,
                symbolConfig,
                simpleRenderMgr: GISComponents.simpleRenderMgr,
                popupManager: GISComponents.popupManager,
                PointGeometryBuilder: GISComponents.PointGeometryBuilder,
                featureLocate: GISComponents.featureLocate,
                featureHighlight: GISComponents.featureHighlight,
                service: rescueTeamServer,
            });
            this.loadData(component.options.service);
            this.getComponent = () => {
                return component;
            };
            component.on('popup', (data: any) => {
                jQuery('#' + data.containerId).append('<b>' + data.data.teamid + '</b>');
            });
        }

        private async loadData(server: any) {
            this.dataList = await rescueTeamServer.list();
        }

        private load() {
            // this.getComponent().load();
            this.getComponent().showTeam(0, this.dataList);
        }

        private unload() {
            this.getComponent().unload();
        }

        private select() {
            const id = this.dataList[2].teamid;
            this.getComponent().select(id);
        }

        private save() {
            this.getComponent().save();
        }

        private update() {
            this.getComponent().update();
        }

        private showTeam(num: number) {
            const list: any = [];
            /*for(let i = 0, len = this.dataList.length; i < len; i++){
                const item = this.dataList[i];
                if (item.areaflag === num) {
                    list.push(item);
                }
            }*/
            this.dataList.forEach((item: any )=> {
                if (item.areaflag === num) {
                    list.push(item);
                }
            })
            this.getComponent().showTeam(num, list);
        }
    }
</script>
<style lang="less" scoped>
</style>
